<template>
	<view class="page-header">
		<view class="page-title">
			<!-- 左侧返回按钮 -->
			<view class="header-operation return-page" @click="headerLeft">
				<u-image width="20" height="38" src="/static/return.png" :fade="false"></u-image>
			</view>
			<view class="title-text single-line-nowrap">{{ title }}</view>
			<!-- 右侧自定义按钮 -->
			<view class="header-operation right-btn" @click="headerRight">
				<view v-if="buttonSrc" class="right-button">
					<image :src="buttonSrc"></image>
				</view>
				<view v-if="Boolean(btnText)" class="button-class" @click="btnClick">{{ btnText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			buttonSrc: {
				type: String,
				default: ''
			},
			btnText: {
				type: String,
				default: ''
			}
		},
		data(){
			return {
			}
		},
		methods: {
			headerLeft() {
				this.$emit('headerLeft')
			},
			headerRight(){
				this.$emit('headerRight')
			},
			btnClick() {
				this.$emit('btnClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-header {
		color: #333333;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 14rpx #c3c3c3;
		height: 176rpx;
		display: flex;
		align-items: flex-end;
		z-index: 1;

		.page-title {
			flex: 1;
			font-size: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			line-height: 1;
			font-weight: 500;
			height: 100%;
			width: 100%;
			
			.title-text {
				width: 400rpx;
				text-align: center;
				padding-bottom: 24rpx;
			}
			.header-operation {
				width: 150rpx;
				height: 100%;
				padding: 0 28rpx;
				display: flex;
				align-items: flex-end;
				.right-button {
					width: 64rpx;
					height: 64rpx;
				}
			}
			.return-page {
				padding-bottom: 24rpx;
			}
			.right-btn {
				justify-content: flex-end;
				padding-bottom: 8rpx;
				
				.button-class {
					font-size: 36rpx;
					height: 80rpx;
					display: flex;
					align-items: flex-end;
					box-sizing: border-box;
					padding-bottom: 16rpx;
					font-weight: 700;
					color: #137EFB;
				}
			}
		}
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
